<template>
  <!-- 活动管理下的:活动详情 -->
  <div>
    <el-form :inline="true" :model="formInline" style="margin: 0;">
            <el-form-item>
                <el-col :span="11.5">
                    <el-date-picker 
                        type="date" 
                        placeholder="活动开始时间(开始)" 
                        v-model="formInline.begin_start_time" 
                        style="width: 100%;"
                        >
                    </el-date-picker>
                </el-col>
                <el-col class="line" :span="0.5">-</el-col>
                <el-col :span="11.5">
                    <el-date-picker 
                        type="date" 
                        placeholder="活动开始时间(结束,填写时最好提前一天)" 
                        v-model="formInline.begin_end_time" 
                        style="width: 100%;"
                        >
                    </el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col :span="11.5">
                    <el-date-picker 
                        type="date" 
                        placeholder="活动结束时间(开始)" 
                        v-model="formInline.finish_start_time" 
                        style="width: 100%;"
                        >
                    </el-date-picker>
                </el-col>
                <el-col class="line" :span="0.5">-</el-col>
                <el-col :span="11.5">
                    <el-date-picker 
                        type="date" 
                        placeholder="活动结束时间(结束,填写时最好提前一天)" 
                        v-model="formInline.finish_end_time" 
                        style="width: 100%;"
                        >
                    </el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-input
                    placeholder="活动名(可以模糊查询)"
                    v-model="formInline.active_name"
                    clearable>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSelect">查 询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="onRest">重 置</el-button>
            </el-form-item>
        </el-form>

      <el-divider></el-divider>

      <el-table
        :data="tableData"
        style="width: 100%">

            <el-table-column
              label="申请时间"
              width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
              </template>
            </el-table-column>

            <el-table-column
            label="活动名"
            prop="active_name">
            </el-table-column>

            <el-table-column
            label="状态"
            prop="status">
                <template slot-scope="scope">
                    <el-tag size="medium" v-show="scope.row.status === '已通过'" type="success">已通过</el-tag>
                    <el-tag size="medium" v-show="scope.row.status === '已结束'" >已结束</el-tag>
                </template>
            </el-table-column>

            <el-table-column
            label="申请人">
                <template slot-scope="scope">
                    <el-tag size="medium" type="primary">{{ scope.row.active_employee_name }}</el-tag>
                </template>
            </el-table-column>


            <el-table-column
            label="开始时间"
            prop="start_time">
            </el-table-column>

            <el-table-column
            label="结束时间"
            prop="end_time">
            </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleComment(scope.$index, scope.row)">评论</el-button>
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 评论对话框 -->
      <router-view></router-view>

      <!-- 编辑抽屉 -->
      <DetailActiveEdit/>
      
      
  </div>
</template>

<script>
  import myAxios from '@/tools/myAxios';
  import Qs from 'qs';
  import DetailActiveEdit from './DetailActiveEdit';
  export default {
    name:'DetailActive',
    components:{
      DetailActiveEdit
    },
    data() {
      return {
        // 活动查询的form表单数据收集
        formInline:{
            begin_start_time:'',
            begin_end_time:'',
            finish_start_time:'',
            finish_end_time:'',
            active_name:''
        },
        // 存放所有的活动信息
        tableData: []
      }
    },
    methods:{
       // 查询按钮(可以根据用户名来模糊查询)
       onSelect() {
            if(this.formInline.begin_start_time !== ''  && this.formInline.begin_end_time !== ''  ||
               this.formInline.finish_start_time !== '' && this.formInline.finish_end_time !== '' ||  
               this.formInline.active_name !== '' ){
                myAxios(
                    'http://localhost:8088/employee/getallactiveforactivedetail',
                    'post',
                    Qs.stringify(this.formInline),
                    (data)=>{
                        if(data.length != 0){
                            this.tableData = data;
                            // 提示一下
                            this.$message({
                                message: '查询成功!',
                                type: 'success'
                            });
                        }else{
                            // 提示一下
                            this.$message({
                                message: '查询结果为空!',
                                type: 'warning'
                            });
                            this.formInline.begin_start_time = '';
                            this.formInline.begin_end_time = '';
                            this.formInline.finish_start_time = '';
                            this.formInline.finish_end_time = '';
                            this.formInline.active_name = '';
                        }
                    }
                );
            }else{
                this.$notify({
                title: '警告',
                message: '请输入正确的条件后再来查询!',
                type: 'warning'
                });
            }
        },
        // 重置按钮
        onRest(){
            window.location.reload();
        },
        // 评论按钮
        handleComment(index, row) {
            myAxios(
              'http://localhost:8088/admin/getallcommentinfobyid?id='+row.id,
              'get',
              null,
              (data)=>{
                this.$router.push({
                      name:'comment',
                        params:{
                          tableData:data,       // 评论信息
                          activeForm:row        // 选中的活动信息
                    }
                })
              }
            )
        },
        // 删除
        handleDelete(index, row) {
          myAxios(
            'http://localhost:8088/admin/activedelete?id='+row.id,
            'get',
            null,
            (data)=>{
              // 提示一下
              this.$message({
                  message: '删除成功!',
                  type: 'success'
              });
              // 删除成功
              this.tableData = this.tableData.filter((item)=> item.id !== row.id)
            }
          )
        },
        // 编辑
        handleEdit(index, row){
          this.$bus.$emit('clickDetailActiveEdit',JSON.parse(JSON.stringify(row)))
        }
    },
    mounted(){
      // 获取所有活动的信息
      myAxios(
        'http://localhost:8088/admin/getallactiveinfo',
        'get',
        null,
        (data)=>{
          if(data.length === 0){
            this.$notify({
                title: '警告',
                message: '没有活动!',
                type: 'warning'
              });
          }else{
            this.tableData = data;
          }
        }
      );
    },
  }
</script>


<style scoped lang="less">

.el-divider--horizontal {
    margin-top: 0;
}
</style>